<template>
    <v-app id="preview">
        <my-app-bar></my-app-bar>
        <my-audio v-if="type === 'audio'" :audio-src="previewSrc" :name="name"></my-audio>
        <my-video v-else-if="type === 'video'" :video-src="previewSrc" :name="name"></my-video>
        <iframe v-else id="document-frame" :src="previewSrc"></iframe>
    </v-app>
</template>

<script>
    import MyAppBar from "../components/disk/layout/MyAppBar";
    import MyAudio from "../components/preview/MyAudio";
    import MyVideo from "../components/preview/MyVideo";
    export default {
        name: "Preview",
        components: {MyVideo, MyAudio, MyAppBar},
        created() {
            let _this = this;
            _this._get({
                url: 'system/disk/get-preview-url',
                params: {
                    key: _this.key
                }
            }).then(rsp => {
                _this.previewSrc = rsp.data
            }).catch(error => {
                console.log(error);
                _this.$serverError();
            })
        },
        data() {
            return {
                previewSrc: '',
            }
        },
        computed: {
            type() {
                let type = this.$route.query.type;
                if (/audio/.test(type)) {
                    return "audio"
                } else if (/video/.test(type)) {
                    return "video"
                } else {
                    return "other"
                }
            },
            name() {
                return this.$route.query.name;
            },
            key() {
                return this.$route.query.key;
            }
        }
    }
</script>

<style scoped>
    #preview {
        width: 100%;
        height: 100%;
        background-color: #f7f7f7;
    }

    #document-frame {
        margin: 60px auto 0;
        width: 960px;
        height: 100%;
        border: 0;
    }
</style>